<template>
	<div class="web-index">
		<!-- 头部 -->
		<header class="web-header">
			<div class="web-nav" :style="{ maxWidth: isVideo === true ? '100%' : ''}">
				<div class="logo">
					<img src="@/assets/logo/web-logo.png" alt="LOGO" class="logo-icon">
					<span class="web-name">选课网</span>
				</div>
				<div class="nav">
					<div class="nav-item" @click="handleHomePage()">
						<a href="#" class="nav-link">首页</a>
					</div>
					<!-- <div class="nav-item" @click="handleCategory()">
						<a href="#" class="nav-link">免费课</a>
					</div>
					<div class="nav-item" @click="handleCategory()">
						<a href="#" class="nav-link">实战课</a>
					</div> -->
				</div>
				<div class="header-right">
					<div class="search-box" v-if="!isSearch">
						<div class="search-input">
							<el-input v-model="searchValue" placeholder="请输入关键字..."></el-input>
						</div>
						<div class="search-btn" @click="handleSearch()">搜索</div>
					</div>
					<div class="shop-cart" @click="handleShopCart()">
						<template v-if="cartNum > 0">
							<el-badge :value="cartNum" class="item">
								<svg-icon icon-class="shopping" class="shop-icon"/>
							</el-badge>
						</template>
						<template v-else>
							<svg-icon icon-class="shopping" class="shop-icon"/>
						</template>
					</div>
					<div class="login-area" v-if="!isLogin">
						<div class="header-signin">
							<a href="/login" class="login-btn">登录</a>
							<span>|</span>
							<a href="/register" class="register-btn">注册</a>
						</div>
					</div>
					<div class="user-box" v-else>
						<div class="user-mycourse-box" @click="handlePersonal('mycourse')">我的课程</div>
						<el-dropdown>
							<span class="el-dropdown-link">
								<el-avatar :src="avatar"></el-avatar>
							</span>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item icon="el-icon-user-solid" @click.native="handlePersonal()">个人中心</el-dropdown-item>
								<el-dropdown-item icon="el-icon-remove" @click.native="handleLogout()">退出登录</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
					</div>
				</div>
			</div>
		</header>
		<!-- 内容区域 -->
		<div class="web-content">
			<transition name="fade-transform" mode="out-in">
				<keep-alive>
					<router-view v-if="!$route.meta.link" :key="key" />
				</keep-alive>
			</transition>
		</div>
		<!-- 底部区域 -->
		<footer class="web-footer">
			<div class="copyright">Copyright © 2024-2025</div>
			<div class="friend-wrap">
				<div class="left">友情链接: </div>
				<div class="link-box">
					<div class="link" v-for="(item, index) in friendList" :key="index">
						<a :href="item.link" target="_blank">{{ item.name }}</a>
					</div>
				</div>
			</div>
		</footer>
	</div>
</template>

<script>
import store from '@/store/index'
import { getToken, removeToken } from '@/utils/auth'
import { mapGetters } from 'vuex'
export default {
	name: 'WebIndex',
	data() { 
		return {
			//是否视频观看页面
			isVideo: false,
			//是否登录
			isLogin: false,
			//是否搜索页
			isSearch: false,
			//搜索
			searchValue: '',
			//购物车
			cartNum: 0,
			//友情链接
			friendList: [
				{ name: '帮考网', link: 'https://www.bkw.cn/' },
				{ name: '慕课教程', link: 'https://www.imooc.com/wiki/' },
				{ name: '育路教育', link: 'http://www.yuloo.com/' },
				{ name: '图片素材', link: 'https://www.ztupic.com/' },
				{ name: '精英考试网', link: 'http://www.jdxzz.com/' },
				{ name: '求艺网', link: 'https://www.qeo.cn/' },
				{ name: '橡皮牛教育网', link: 'https://www.xiangpiniu.com/' },
				{ name: '高顿教育', link: 'https://www.gaodun.com/' },
				{ name: 'W3Cschool', link: 'https://www.w3cschool.cn/' },
				{ name: '会计学堂', link: 'http://www.acc5.com/' },
				{ name: '招生信息网', link: 'https://www.bangboer.net/' },
				{ name: '起点课堂 ', link: 'http://www.qidianla.com/' },
				{ name: '在职研究生', link: 'https://www.eduego.com/' },
				{ name: '溜溜自学网', link: 'https://www.zixue.3d66.com/' },
				{ name: '人人都是产品经理', link: 'https://www.woshipm.com/' },
				{ name: '考研', link: 'https://www.open.com.cn/' },
				{ name: 'APP开发', link: 'http://www.apicloud.com/' },
				{ name: 'CG教育', link: 'https://www.hxsd.com/' },
				{ name: '大风车网', link: 'http://www.wljyyjy.com/' },
				{ name: '高考志愿填报', link: 'https://www.ddanl.com/' },
				{ name: '运营营销推广', link: 'https://www.niaogebiji.com/' },

			]
		}
	},
	computed: {
		...mapGetters([
			'name',
			'avatar'
		]),
		key() {
			return this.$route.path
		}
	},
	watch: { 
		'$route': {
			handler(newValue) { 
				if (newValue.path == '/webSearch') {
					this.isSearch = true;
				} else { 
					this.isSearch = false;
				}

				if (newValue.path == '/videoView') {
					this.isVideo = true;
				} else { 
					this.isVideo = false;
				}
			},
			immediate: true
		}
	},
	mounted() { 
		//判断是否登录
		if (getToken()) { 
			this.queryUserInfo();
		}
	},
	methods: {
		/**
		 * 获取用户信息
		 */
		queryUserInfo() { 
			// 判断当前用户是否已拉取完user_info信息
			store.dispatch('GetInfo').then(() => {
				this.isLogin = true
			}).catch(err => {
				this.isLogin = false
			})
		},
		/**
		 * 搜索
		 */
		handleSearch() { 
			this.$router.push({
				path: '/webSearch',
				query: {
					title: this.searchValue
				}
			})
		},
		/**
		 * 首页
		 */
		handleHomePage() { 
			this.$router.push('/webMain')
		},
		/**
		 * 购物车
		 */
		handleShopCart() { 
			this.$router.push('/shopCart')
		},
		/**
		 * 分类
		 */
		handleCategory() { 
			this.$router.push('/webCategory')
		},
		/**
		 * 个人中心
		 */
		handlePersonal() { 
			this.$router.push('/personal')
		},
		/**
		 * 退出登录
		 */
		handleLogout() { 
			removeToken();
			this.$router.push('/login')
		}
	}
}
</script>

<style lang="scss" scoped>
.web-index {
	width: 100%;
	height: 100%;
	.web-header {
		width: 100%;
		height: 70px;
		background: #fff;
		border-bottom: 1px solid #F3F5F6;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 999;
		.web-nav {
			display: flex;
			height: 100%;
			max-width: 1260px;
			min-width: 1152px;
			margin: 0 auto;
			flex-direction: row;
			align-items: center;
			padding: 0 15px;
			.logo {
				height: 100%;
				display: flex;
				flex-direction: row;
				align-items: center;
				margin-right: 28px;
				.logo-icon {
					width: 40px;
					height: 40px;
				}
				.web-name {
					font-size: 26px;
					margin-left: 15px;
					color: #222;
				}
			}
			.nav {
				flex: 1;
				display: flex;
				flex-direction: row;
				align-items: center;
				height: 100%;
				.nav-item {
					height: 100%;
					.nav-link {
						padding: 0 16px;
						display: block;
						color: #545C63;
						text-align: center;
						font-size: 16px;
						height: 70px;
						line-height: 70px;
						&:hover {
							color: #000;
						}
					}
				}
			}
			.header-right {
				height: 100%;
				display: flex;
				flex-direction: row;
				align-items: center;
				.search-box,
				.shop-cart {
					margin-right: 24px;
					font-size: 16px;
					line-height: 40px;
				}
				.search-box {
					display: flex;
					flex-direction: row;
					border: 1px solid #97c225;
					.search-input {
						width: 210px;
					}
					.search-btn {
						display: flex;
						background: #97c225;
						border: 1px solid #97c225;
						color: #FFF;
						cursor: pointer;
						font-size: 14px;
						height: 40px;
						width: 80px;
						align-items: center;
						justify-content: center;
					}
				}
				.shop-cart {
					.shop-icon {
						font-size: 20px;
						color: #545C63;
						transition: all .2s;
						cursor: pointer;
						&:hover {
							color: #f01414;
						}
					}
				}
				.header-signin {
					color: #545C63;
					font-size: 16px;
					display: flex;
					flex-direction: row;
					align-items: center;
					a {
						transition: all .2s;
						&:hover {
							color: #f01414;
						}
					}
					> span {
						margin: 0 6px;
					}
				}
				.user-box {
					display: flex;
					flex-direction: row;
					align-items:center;
					.user-mycourse-box {
						margin-right: 18px;
						color: #545C63;
						transition: all .2s ease-in-out;
						cursor: pointer;
						&:hover {
							color: #97c225;
						}
					}
					.el-avatar {
						width: 36px;
						height: 36px;
						transition: all .2s ease-in-out;
						border: 2px solid #F3F5F6;
						cursor: pointer;
						&:hover {
							border: 2px solid #97c225;
						}
					}
				}
			}
		}
	}
	.web-content {
		width: 100%;
		height: auto;
		min-height: 760px;
		margin-top: 70px;
	}
	.web-footer {
		width: 100%;
		background-color: #eee;
		color: #777;
		padding-bottom: 30px;
		.copyright {
			width: 100%;
			text-align: center;
			padding: 20px 0;
		}
		.friend-wrap {
			width: 1230px;
			margin: 0 auto;
			display: flex;
			flex-direction: row;
			.left {
				color: #545C63;
				line-height: 28px;
				margin-right: 12px;
				font-size: 14px;
				font-weight: 300;
				white-space: nowrap;
			}
			.link-box {
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				.link {
					color: #545C63;
					line-height: 28px;
					margin: 0 24px 12px 0;
					font-size: 14px;
					font-weight: 300;
				}
			}
		}
	}
}
::v-deep .search-box .el-input__inner {
	border: none !important;
	height: 40px !important;
	line-height: 40px !important;
}
</style>